<template>
  <div class="container">
    <el-form ref="form" v-loading="formLoading" :model="form" :rules="rules">
      <el-form-item prop="status" label="开启公告：">
        <el-radio-group v-model="form.status">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="title" label="公告标题：">
        <el-input v-model="form.title" placeholder="请输入公告标题"></el-input>
      </el-form-item>
      <el-form-item prop="content" label="公告内容：">
        <div style="min-width:800px;margin-left:120px;">
          <!-- <div class="box">
            <el-upload style="display:none" class="upload-demo" name="file" accept="image/*"
              action="http://10.5.0.14:8100/zsrencai/api/sys/admin/file/image/upload" :show-file-list="false"
              :on-success="success" :before-upload="beforeAvatarUpload"></el-upload>
          </div> -->
          <!-- <quill-editor v-model="form.content" ref="myQuillEditor" :options="editorOption">
          </quill-editor> -->
          <Tinymce v-model="form.content" :height="380"></Tinymce>
        </div>
      </el-form-item>
      <el-form-item class="btn_box">
        <el-button class="finish_btn" type="primary" @click="onSubmit">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addSitenotice, selectfreshnotice } from '../../../api/content';
import Tinymce from '../../common/Tinymce' // 引入富文本编辑
import { quillEditor } from 'vue-quill-editor'; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block']
  [{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: '-1' }, { indent: '+1' }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
  [{ 'direction': 'rtl' }], // 文本方向-----[{'direction': 'rtl'}]
  [{ size: ['small', false, 'large', 'huge'] }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: [] }], // 字体种类-----[{ font: [] }]
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  ['clean'], // 清除文本格式-----['clean']
  ['link', 'image'] // 链接、图片、视频-----['link', 'image', 'video']
];
export default {
  components: {
    quillEditor
  },
  data () {
    return {
      formLoading: false,
      // 富文本编辑器的配置项
      editorOption: {
        placeholder: '请输入文本...',
        theme: 'snow',
        modules: {
          toolbar: {
            container: toolbarOptions, // 工具栏
            //   handlers: {
            //     image: function (value) {
            //       if (value) {
            //         document.querySelector(".box input[name='file']").click();
            //       } else {
            //         this.quill.format('image', false);
            //       }
            //     }
            //   }
          }
        }
      },
      // 表单信息
      form: {
        status: '', //参数:status 开启公告 0 禁用 1启用  传数字类型
        title: '',
        content: '',
      },
      menuIdList: [],
      rules: {
        status: [{ required: true, message: '请选择是否开启公告', trigger: 'change' }],
        title: [
          { required: true, message: '请输入公告标题', trigger: 'blur' },
          { max: 40, message: '公告标题不能超过40个字' }
        ],
        content: [{ required: true, message: '请输入公告内容', trigger: 'blur' }]
      }
    };
  },
  created () {
  },
  mounted () {
    this.echoSiteAnnouncement();
  },
  components: {
    Tinymce
  },
  computed: {
    editor () {
      return this.$refs.myQuillEditor.quill;
    }
  },
  methods: {
    beforeAvatarUpload () {
      // if (this.form.newsFiles.length >= 10) {
      //   this.$message.error('最多上传文件10个');
      //   return false;
      // }
    },
    success (res, file, fileList) {
      // res为图片服务器返回的数据
      // 获取富文本组件实例
      let quill = this.$refs.myQuillEditor.quill;
      // 如果上传成功
      // if (res.code === '200' && res.info !== null) {
      // 获取光标所在位置
      let length = quill.getSelection().index;
      // 插入图片  res.info为服务器返回的图片地址
      quill.insertEmbed(length, 'image', res.data.fileUrl);
      // 调整光标到最后
      quill.setSelection(length + 1);
    },
    // 回显站点公告
    echoSiteAnnouncement () {
      this.formLoading = true;
      selectfreshnotice().then(res => {
        if (res.success) {
          this.formLoading = false;
          if (res.data) {
            res.data.content = decodeURI(res.data.content)
            this.form = res.data;
          }

        } else {
          this.$message.error(`${res.msg}`)
        }
        this.formLoading = false;
      })
    },
    // 点击提交按钮
    onSubmit () {
      this.$refs.form.validate(valid => {
        if (valid) {
          // encodeURI() 函数可把字符串作为 URI 进行编码。
          let query = {
            status: this.form.status,
            title: this.form.title,
            content: encodeURI(this.form.content)
          }
          addSitenotice(query).then(res => {
            if (res.success) {
              this.$message({
                message: '添加成功',
                type: 'success'
              });
              // this.echoSiteAnnouncement();
              // this.clearForm();
            } else {
              this.$message.error(`${res.msg}`);
            }
          })
        }
      });
    },
    // 清空表单
    clearForm () {
      this.$refs.form.resetFields();
      this.form.content = ''
    }
  }
};
</script>
<style>
ul,
li {
    list-style-type: none;
}
.boxs {
    position: relative;
    margin-left: 120px;
}
.boxs a {
    margin: 0 5px;
    color: #0000ff;
    cursor: pointer;
}
.boxs .del {
    color: #e1374c;
    cursor: pointer;
}
.editor {
    line-height: normal;
    height: 220px;
}
.ql-snow .ql-tooltip[data-mode='link']::before {
    content: '请输入链接地址:';
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0px;
    content: '保存';
    padding-right: 0px;
}

.ql-snow .ql-tooltip[data-mode='video']::before {
    content: '请输入视频地址:';
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
    content: '10px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
    content: '18px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
    content: '32px';
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: '文本';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
    content: '标题1';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
    content: '标题2';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
    content: '标题3';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
    content: '标题4';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
    content: '标题5';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
    content: '标题6';
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: '标准字体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
    content: '衬线字体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
    content: '等宽字体';
}
#disabledMsg.el-button.is-disabled,
.el-button.is-disabled:focus,
.el-button.is-disabled:hover {
    color: #bfd9d8;
    background-color: #eef6f6;
    border-color: #d1e5e5;
}
.el-upload {
    width: 95px;
    height: 35px;
    border: 0;
}
</style>

<style scoped>
.container /deep/ .el-form-item__label {
    width: 120px;
}
.el-form .el-form-item /deep/ .el-form-item__error {
    left: 120px;
}
.el-input {
    width: 300px;
    margin-right: 10px;
}
.el-textarea {
    width: 300px;
}
.el-select {
    width: 300px;
}
.btn_box {
    padding-left: 118px;
}
.btn_box .el-button {
    width: 100px;
    margin-right: 80px;
}
.upload /deep/ .el-upload {
    display: flex;
    align-items: center;
    width: 94px;
    height: 24px;
    line-height: 32px;
}
.upload /deep/ .upload-demo {
    display: inline-block;
    width: 94px;
    height: 24px;
    line-height: 24px;
    background: rgba(24, 147, 252, 1);
    opacity: 1;
}
.upload /deep/ .el-button {
    width: 94px;
    height: 24px;
    line-height: 0px;
    background: rgba(24, 147, 252, 1);
    opacity: 1;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}
.upload ul {
    display: inline-block;
    list-style: none;
    width: 500px;
    overflow: hidden;
}
.upload ul li {
    float: left;
    width: 124px;
    height: 124px;
    margin-right: 40px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(24, 147, 252, 1);
    opacity: 1;
    margin-bottom: 24px;
}
.upload ul li img {
    width: 100%;
    height: 100%;
}
</style>